<template>
  <div class="login-container">
    <el-card class="login-card">
      <h2 class="title">用户登录</h2>
      <el-form
          :model="form"
          ref="loginForm"
          label-position="top"
          class="login-form">
        <el-form-item label="账号">
          <el-input
              v-model="form.username"
              prefix-icon="el-icon-user"
              placeholder="请输入用户名">
          </el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
              v-model="form.password"
              prefix-icon="el-icon-lock"
              type="password"
              placeholder="请输入密码"
              @keydown.enter.native="login">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="login-btn" @click="login()">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import request from "@/utils/request";
import ValidCode from "@/components/ValidCode.vue";

export default {
  name: "LoginView",
  created() {
    document.title = '用户登录';
  },
  data() {
    return {
      form: {
        username: '111@qq.com',
        password: '111'
      }
    }
  },
  methods: {
    login() {
      const params = new URLSearchParams();
          params.append('email', this.form.username);
          params.append('password', this.form.password);
      request.post('/UserLoginServlet', params).then(res => {
        if (res === 1) {
          this.$message({
            type: 'success',
            message: "登录成功",
          });
          // 跳转主页，检测用户的角色是否为管理员，如果是admin才跳转管理页面
          console.log('this.form.username',this.form.username)
          localStorage.setItem('email', this.form.username)
          this.$router.push('/shop');
        } else {
          this.$message({
            type: 'error',
            message: res.msg,
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.login-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, rgb(82,217,206) 0%, rgba(82,217,206,0.7) 100%);
}

.login-card {
  width: 400px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.title {
  text-align: center;
  color: rgb(82,217,206);
  margin-bottom: 30px;
  font-size: 24px;
}

.login-form {
  .el-form-item {
    margin-bottom: 20px;
  }
}

.login-btn {
  width: 100%;
  border-radius: 4px;
  margin-top: 10px;
  background: rgb(82,217,206);
  border-color: rgb(82,217,206);
}

.login-btn:hover {
  background: rgba(82,217,206,0.8);
  border-color: rgba(82,217,206,0.8);
}

.el-input {
  border-radius: 4px;
}
</style>